import { Image, ImageViewer, NavBar, Image as MyImage } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import $fetch from "../../../utils/app/$fetch";
import "./style.scss";

const ScheduleDetail = () => {
  const location: any = useLocation();
  const eventId = location?.state?.eventId;
  const [scheduleDetail, setScheculeDetail] = useState<any>([]);
  const [loading, setLoading] = useState<any>(true);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    initPage();
  }, []);

  const initPage = async () => {
    try {
      const res: any = await $fetch(`event/eventDetail/${eventId}`);
      setScheculeDetail(res);
      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  };

  const back = () => {
    window.history.go(-1);
  };

  const renderView = () => {
    if (loading) return null;
    return (
      <div className="that_schedule_detail">
        <h3>{scheduleDetail?.eventName}</h3>
        <div className="act_type">
          <Image
            src={scheduleDetail?.eventPhoto}
            lazy={true}
            width="90%"
            height="100%"
            fit="contain"
            placeholder={<Image src="" width="100%" height="4rem" />}
            onClick={() => {
              setVisible(true);
            }}
          />
        </div>

        <ImageViewer
          image={scheduleDetail?.eventPhoto}
          visible={visible}
          onClose={() => {
            setVisible(false);
          }}
        />
        <ul>
          <h3>参与人员</h3>
          {scheduleDetail?.memberList?.map((item: any, index: any) => {
            return (
              <li className="content_wraper">
                <div className="img_content">
                  {/* <img src={item?.memberFormulPhoto} alt="" /> */}
                  <MyImage
                    src={item?.memberFormulPhoto}
                    fit="cover"
                    width='1.26rem'
                    height='1.26rem'
                    lazy={true}
                    placeholder={<MyImage src="" width="100%" height="1.26rem" />}
                  />
                </div>
                <div>{item?.memberName}</div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  };

  return (
    <div className="container_schedule_detail">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        活动详情
      </NavBar>
      {renderView()}
    </div>
  );
};

export default ScheduleDetail;
